<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	$(function() {
		
		//获取到视频
		var video = document.getElementById('video');
		
		//获取播放进度，并从该进度处继续播放
		var curTime = $("#hidCurTime").val();
		video.currentTime = curTime;
		
		//使用事件监听方式捕捉事件，记录当前播放时间
		video.addEventListener("timeupdate", function() {
			//用秒数来显示当前播放进度
			var timeDisplay = Math.floor(video.currentTime);
			//禁止用户快进
			if (timeDisplay - curTime > 1) {
				video.currentTime = curTime;
			}else{
				curTime = timeDisplay;
				//更新数据库视频播放进度
				record();
			}
			
		}, false);
		
		//更新数据库视频播放进度
		function record() {
			$.post("/record", {
				id : $("#hidId").val(),
				curTime : curTime
			}, function(data) {
			});
		}

		
	})
</script>
</head>
<body>
	<input type="hidden" id="hidId" th:value="${video.id}">
	<input type="hidden" id="hidCurTime" th:value="${video.currentTime}">
	<video id="video" th:src="${src}" controls autoplay width="400"
		height="300"></video>
	<br />

</body>
</html>
